<template>
	<view >
		<u-form-item
			:required="item.required"
			:label="item.label"
			:prop="item.key"
			@click="showDatePicker = true; hideKeyboard()"
		>
			<view slot="right" style="display: flex;">
				<u--input
					v-model="newValue"
					disabled
					disabledColor="#ffffff" inputAlign="right"
					:placeholder="item.placeholder || '请选择'+item.label "
					border="none"
				></u--input>
				<u-icon
					name="arrow-right"
				></u-icon>
			</view>
			
		</u-form-item>
		
		 <u-datetime-picker
			:show="showDatePicker"
			v-model="defaultDate"
			:mode="item.mode || 'date'"
			:minDate="item.minDate || minDate"
			:maxDate="item.maxDate || maxDate"
			closeOnClickOverlay
			@close="cancel" @cancel="cancel" @confirm="confirm"
		></u-datetime-picker>
				
	</view>
	
</template>

<script>
	// 获取当前日期
	const currentDate = new Date();
	// 获取十年后的日期
	const maxDate = new Date(currentDate);
	maxDate.setFullYear(currentDate.getFullYear() + 10);
	
	const minDate = new Date(currentDate);
	minDate.setFullYear(currentDate.getFullYear() - 10);
	
	export default {
		name:"base-form-datePicker",
		props: {
			item:{
				type:Object,
				default:{}
			},
			
		},
		model: {
		    prop: 'value', // 默认是value
		    event: 'input', // 默认是input
		  },
		// emits: ['update:value'],
		data() {
			return {
				newValue:this.value,
				showDatePicker:false,
				defaultDate:this.value || Number(new Date()),
				maxDate: Number(maxDate),
				minDate: Number(minDate),
			};
		},
		watch: {
			newValue: {
				immediate: false,
				handler(newVal, oldVal) {
					// console.log(newVal,oldVal)
					this.valueChange(newVal);
				},
			},
		},
		
		created() {

		},
		methods: {
			
			cancel(){
				this.showDatePicker = false
			},
			confirm(e){
				console.log(e) 
				this.newValue = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showDatePicker = false
			},
			// 内容发生变化，进行处理
			valueChange(newVal) {
				this.$emit("input", newVal);
				this.$emit("change", newVal);
			},
			
			hideKeyboard() {
				uni.hideKeyboard()
			},
		}
	}
</script>

<style>
.cell-box{
	margin: 10rpx 20rpx;
	padding-left: 10rpx;
	padding-right: 10rpx;
	border-radius: 10rpx;
	border: 1px solid #eee;
}
</style>